<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>  
<!DOCTYPE html>
<html>
<head>
<title>新增角色</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<jsp:include page="/WEB-INF/views/include/newhead.jsp" />
<%@include file="/WEB-INF/views/include/treeview.jsp"%>
</head>
<body class="childrenBody site-block">
	<header class="larry-personal-tit">
		<span><c:if test="${empty role.id}">新增</c:if><c:if test="${not empty role.id}">修改</c:if>岗位
		</span>
	</header><!-- /header -->
	
	<div class="mainCon">
	<form:form id="inputForm" modelAttribute="role" action="${ctx}/sys/role/save" method="post">
		<form:hidden path="id"/>
		<sys:message content="${message}"/>

		<div class="layui-form-item">
		   <div class="layui-inline">
			<label class="layui-form-label"><font color="red">*</font>角色名称</label>
			<div class="layui-input-inline">
			    <input id="oldName" name="oldName" type="hidden" value="${role.name}">
				<input class="layui-input required" name="name" value="${role.name}"  placeholder="请输入岗位名称" type="text">
			</div>
		   </div>
		   
		   <div class="layui-inline">
			<label class="layui-form-label"><font color="red">*</font>英文名称</label>
			<div class="layui-input-inline">
			    <input id="oldEnname" name="oldEnname" type="hidden" value="${role.enname}">
				<input class="layui-input abc required" name="enname" value="${role.enname}"  placeholder="请输入岗位名称" type="text">
			</div>
		   </div>
		   
		</div>

		<div class="layui-form-item">
		   <div class="layui-inline">
			<label class="layui-form-label">角色类型</label>
			<div class="layui-input-inline">
				<form:select id="roleType" path="roleType" class="select2_" onchange="changeByRoleType();">
					<form:options items="${fns:getDictList('sys_role_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
				</form:select>
			</div>
		    </div>
		</div>
	    <div id="office_div" class="layui-form-item" style="display: none">
			<label class="layui-form-label">归属机构</label>
			<div class="layui-input-inline layui-input-inline-one">
			    <sys:treeselect id="office" name="office.id" value="${role.office.id}" 
 				labelName="office.name" labelValue="${role.office.name}"
 				title="机构" url="/sys/office/treeData" cssClass="layui-input layui-input-treeselect required"/>
			</div>
		</div>
	    <div class="layui-form-item">
	       <div class="layui-inline">
			<label class="layui-form-label">是否可用</label>
			<div class="layui-input-inline ">
				<form:select path="useable" class="select2_">
					<form:options items="${fns:getDictList('yes_no')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
				</form:select>
			</div>
		    </div>
		    
		    <div class="layui-inline">
			<label class="layui-form-label">数据范围</label>
			<div class="layui-input-inline">
				<!-- 不是超级管理员 -->
				<c:if test="${fns:getUser().isAdmin() ==  false}">
					<form:select path="dataScope" class="select2_">
						<form:options items="${fns:getDictListExc('sys_data_scope','1')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</c:if>
				<!-- 是超级管理员 -->
				<c:if test="${fns:getUser().isAdmin() == true}">
					<form:select path="dataScope" class="select2_">
						<form:options items="${fns:getDictList('sys_data_scope')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</c:if>
			</div>
		   </div>
		</div>
		<div class="layui-form-item" style="display: none">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block input500">
			    <form:textarea path="remarks" htmlEscape="false" rows="4" maxlength="200"  class="layui-textarea"/>
			</div>
		</div>
		<ul style="padding-bottom: 50px;">
		<%-- 
					<li>
						<p>岗位类型：</p>
						<div class="form-right">
							<form:select path="roleType" class="form-control">
								<form:option value="assignment">任务分配</form:option>
								<form:option value="security-role">管理岗位</form:option>
								<form:option value="user">普通岗位</form:option>
							</form:select>
						</div>
					</li>--%>
					<li style="display: none">
						<p>是否系统数据：</p>
						<div class="form-right">
							<form:select path="sysData" class="form-control">
								<form:options items="${fns:getDictList('yes_no')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
							</form:select>
						</div>
					</li>
					<li class="full" style="display: none">
						<p>数据范围：</p>
					</li>
					<li class="full" style="padding-left: 60px;">
						<p>岗位授权：</p>
						<div class="form-right">
							<div id="menuTree" class="ztree" style="margin-top:3px;float:left;margi-bottom:10px;width:50%;"></div>
							<form:hidden path="menuIds"/>
						 <div id="officeTree_div" style="float:left;">
							 <p>按明细设置：</p>
							<div id="officeTree" class="ztree" style="margin-left:20px;margin-top:3px;float:left;"></div>
							<form:hidden path="officeIds"/>
						 </div>
						</div>
					</li>
				</ul>
			
		<div class="layui-form-item">
		</div>
					
		<div class="layui-form-item bottom_xf">
			<div class="layui-input-block input500">
			    <button type="button" class="layui-btn layui-btn-primary" onclick="gotoView('${ctx}/sys/role/list');">返回</button>
				<button class="layui-btn" type="submit">保存</button>
				<button onclick="formReset();" type="button"  class="layui-btn layui-btn-danger">重置</button>
		    </div>
		</div>
	</form:form>
</div>

	<jsp:include page="/WEB-INF/views/include/pageJs.jsp" />
	
	<script type="text/javascript">
		$(document).ready(function(){
			$("#inputForm").validate({
				rules: {
					name: {remote: "${ctx}/sys/role/checkName?oldName=" + encodeURIComponent("${role.name}")},
					enname: {remote: "${ctx}/sys/role/checkEnname?oldEnname=" + encodeURIComponent("${role.enname}")}
				},
				messages: {
					name: {remote: "岗位名已存在"},
					enname: {remote: "英文名已存在"}
				},
				submitHandler: function(form){
					var ids = [], nodes = tree.getCheckedNodes(true);
					for(var i=0; i<nodes.length; i++) {
						ids.push(nodes[i].id);
					}
					$("#menuIds").val(ids);
					var ids2 = [], nodes2 = tree2.getCheckedNodes(true);
					for(var i=0; i<nodes2.length; i++) {
						ids2.push(nodes2[i].id);
					}
					$("#officeIds").val(ids2);
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});

			var setting = {
					check:{enable:true,nocheckInherit:true},
					view:{selectedMulti:false},
					data:{simpleData:{enable:true}},
					callback:{
						beforeClick:function(id, node){
							tree.checkNode(node, !node.checked, true, true);
							return false;
						}
					}
				};
			
			// 用户-菜单
			var zNodes=[
					<c:forEach items="${menuList}" var="menu">{id:"${menu.id}", pId:"${not empty menu.parent.id?menu.parent.id:0}", name:"${not empty menu.parent.id?menu.name:'权限列表'}"},
		            </c:forEach>];
			// 初始化树结构
			var tree = $.fn.zTree.init($("#menuTree"), setting, zNodes);
			// 不选择父节点
			tree.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
			// 默认选择节点
			var ids = "${role.menuIds}".split(",");
			for(var i=0; i<ids.length; i++) {
				var node = tree.getNodeByParam("id", ids[i]);
				try{tree.checkNode(node, true, false);}catch(e){}
			}
			// 默认展开全部节点
			tree.expandAll(true);
			
			// 用户-机构
			var zNodes2=[
					<c:forEach items="${officeList}" var="office">{id:"${office.id}", pId:"${not empty office.parent?office.parent.id:0}", name:"${office.name}"},
		            </c:forEach>];
			// 初始化树结构
			var tree2 = $.fn.zTree.init($("#officeTree"), setting, zNodes2);
			// 不选择父节点
			tree2.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
			// 默认选择节点
			var ids2 = "${role.officeIds}".split(",");
			for(var i=0; i<ids2.length; i++) {
				var node = tree2.getNodeByParam("id", ids2[i]);
				try{tree2.checkNode(node, true, false);}catch(e){}
			}
			// 默认展开全部节点
			tree2.expandAll(true);
			// 刷新（显示/隐藏）机构
			refreshOfficeTree();
			$("#dataScope").change(function(){
				refreshOfficeTree();
			});
			
			changeByRoleType();
		});
		function refreshOfficeTree(){
			if($("#dataScope").val()==9){
				$("#officeTree").show();
				$("#officeTree_div").show();
			}else{
				$("#officeTree").hide();
				$("#officeTree_div").hide();
			}
		}
		
		function changeByRoleType(){
			if($("#roleType").val() == "1"){
				$("#office_div").hide();
			}else{
				$("#office_div").show();
			}
		}
	</script>
</body>
</html>